<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="896"   >

    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchHandleDelete">
                <Icon icon="ant-design:delete-outlined"></Icon>
                移出该班组
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down"></Icon>
          </a-button>
        </a-dropdown>
      </template>

      <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
      <template #img="{ text }">
        <img :src="text" width="50px" height="100px" v-show="text"/>
      </template>
    </BasicTable>
  </BasicModal>
  <!-- 表单区域 -->
  <SsPersonModal @register="registerModal1" @success="handleSuccess"></SsPersonModal>

</template>

<script lang="ts" setup>
  import {ref, computed, unref, reactive} from 'vue';
  import {BasicModal, useModal, useModalInner} from '/@/components/Modal';
  import {BasicForm, FormSchema, useForm} from '/@/components/Form/index';
  import {defHttp} from "/@/utils/http/axios";

  import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage';
  import {useMessage} from "/@/hooks/web/useMessage";
  import {formSchema} from '../SsPersonGroup.data';
  import SsPersonModal from '../../person/components/SsPersonModal.vue'
  import {
    columnsPerson as columns,
    searchFormSchema,
    searchFormSchemaPersonGroup,
    superQuerySchema
  } from '../../person/SsPerson.data';
  import {
    deleteBy,
    listGroupPerson,
  } from '../SsPersonGroup.api';

  const { createMessage, createErrorModal } = useMessage();
  const [registerModal1, {openModal}] = useModal();


  // 列表页面公共参数、方法
  const { tableContext } = useListPage({
    designScope: 'basic-table-demo-ajax',
    tableProps: {
      api: listGroupPersonA,
      columns: columns,
      formConfig: {
        labelWidth: 60,
        schemas: searchFormSchemaPersonGroup,
        autoSubmitOnEnter:false,
        showAdvancedButton:true,
        fieldMapToNumber: [
        ],
        fieldMapToTime: [
        ],
      },
      actionColumn: {
        width: 120,
        fixed:'right'
      },
    },
  });
  //BasicTable绑定注册
  const [registerTable,{getCacheColumns,getTableRef,getDataSource,reload},{ rowSelection, selectedRowKeys }] = tableContext;


    // Emits声明
  const emit = defineEmits(['register','success']);
  const isUpdate = ref(false);
  const view = ref();
  const planModel = reactive({ });
  //表单配置
  const [registerForm, {setProps,resetFields, setFieldsValue, validate,updateSchema,getFieldsValue}] = useForm({
    labelWidth: 160,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: {span: 12}
  });
  const groupid = ref();
  //表单赋值
  const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
    console.log(data)
    groupid.value = data.select[0].id;
    view.value = data?.view;
    console.log(groupid)
    setModalProps({confirmLoading: false,showCancelBtn:false,showOkBtn:false});
  });

  //设置标题
  const title = "班组人员列表";//computed(() => (!unref(isUpdate) ? '新增' : '编辑'));
  const { createConfirm } = useMessage();


  async function listGroupPersonA(params){
    console.log(groupid)
    console.log(params)
    params.groupId = groupid.value;
    console.log(params)
    let res =  await listGroupPerson(params);
    console.log(res)
    return res;
  }

  /**
   * 操作栏
   */
  function getTableAction(record){
    const bt =  [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
      {
        label: '移出该班组',
        onClick: handleRemoveFromGroup.bind(null, record),
      }
    ];
    console.log(view)
    if(view.value){
      bt.splice(1,1);
    }else{
      bt.splice(0,1);
    }
    return bt;
  }


  async function handleRemoveFromGroup(record: Recordable){
      let params = {};
      params.personId = record.id;
      params.groupId = groupid.value;

       return await deleteBy(params,handleSuccess())
  }
  /**
   * 批量删除事件
   */
  async function batchHandleDelete() {
    let params = {};
    let pds = "";
    for(let i = 0;i<selectedRowKeys.value.length;i++){
      if(i==0)
      pds = pds+selectedRowKeys.value[i];
      else
        pds = pds+","+selectedRowKeys.value[i];
    }


    params.personId = pds;
    params.groupId = groupid.value;
    console.log(selectedRowKeys.value)
    let res =  await deleteBy(params,handleSuccess())
    reload();
  }
  /**
   * 详情
   */
  function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
      showFooter: false,
    });
  }


  //表单提交事件
  async function handleSubmit(v) {

    (selectedRowKeys.value = []) && reload();

  }
  function handleSuccess(){
    (selectedRowKeys.value = []) && reload();
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number){
    width: 100%
  }

  :deep(.ant-calendar-picker){
    width: 100%
  }
</style>
